{dialog.object}actionSheet Method

Syntax

{dialog.object}.actionSheet(menu [, width]);

Arguments

menuarray of arrays: A Javascript array of arrays that defines the menu and the actions associated with each menu item. Each array within the outer array defines a menu group. Each item within the nested arrays is an object that defines either a menu item, or a comment. The objects have an html property and an optional action property. If an item does not have an action property is is a label. The action property is a Javascript function to call when the menu item is tapped. See example below.
widthstring: Defines the width of the action sheet. Expressed in absolute CSS units (e.g. '300px'). If omitted, the Action Sheet is the full width of the device.

Description

Displays an Action Sheet.

Discussion

A common user interface design in iOS mobile applications is the Action Sheet. An action sheet is a series of menu options that animates into display from the bottom of the screen. The menu can be divided into logical sections, as shown in the image below.

The {dialog.object}.actionSheet method can be used to display an Action Sheet.

The following Javascript produces the Action Sheet shown in the image above

var menu = [
    [
        {html: 'This is the help text above the Action Sheet. It does not have an action'},
        {html: 'Save', action: function(){alert('save');}},
        {html: 'Save As...', action: function(){alert('saveas');} }
    ],
    [
        {html: 'New', action: function(){alert('new')}},
        {html: 'Open...', action: function(){alert('open');}}
    ],
    [
        {html: 'Cancel', action: function(){alert('cancel');}}
    ]
];

{dialog.object}.actionSheet(menu);